import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Form, Card, Button, Input, message } from 'antd'
const FormItem = Form.Item;
import 'styles/setting/workflow/new-workflow.scss'
import LanguageInput from 'components/template/language-input/language-input'
import workflowUtil from 'containers/setting/new-workflow/utils'

class NewNodePrint extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      basicInfo: {},
    }
  }


  componentDidMount() {
    this.setState({
      basicInfo: this.props.basicInfo,
    })
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      basicInfo: nextProps.basicInfo,
    })
  }

  onChange = (e, attr) => {
    let { basicInfo } = this.state;
    basicInfo[attr] = e;
    this.setState({ basicInfo });
    this.props.onChangeAttr(e.target.value, attr);
  };


  handleRemarkChange = (value,i18n) => {
    this.onChange(value,'remark');
    this.onChange({ remark: i18n }, 'i18n');
  };

  render() {
    const { basicInfo, nodeNameObj } = this.state;
    const formItemLayout = {
      labelCol: { span: this.props.language.code === 'zh_cn' ? 3 : 4 },
      wrapperCol: { span: this.props.language.code === 'zh_cn' ? 21 : 20 },
    };
    return (
      <div className='node-print'>
        <FormItem {...formItemLayout} label={messages('setting.key1372'/*节点名称*/)} colon={false}>
          <LanguageInput
            name={basicInfo.remark }
            width={300}
            inpRule={workflowUtil.getInpRule(100, this.props.languageList)}
            i18nName={basicInfo.i18n && basicInfo.i18n.remark}
            isEdit
            nameChange={this.handleRemarkChange}
          />
        </FormItem>
      </div>
    )
  }
}

NewNodePrint.propTypes = {
  basicInfo: React.PropTypes.object,
  basicInfoSaveHandle: React.PropTypes.func, //基本信息保存成功的回调
  onChangeAttr: React.PropTypes.func,//更改信息的回调 值&属性名
};

NewNodePrint.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList,
    language: state.main.language
  }
}

const wrappedNodePrint = Form.create()(NewNodePrint);

export default connect(mapStateToProps)(wrappedNodePrint)
